<template>
	<view class="mix-product-list" :class="{'is-row': listType === 'row'}">
		<view class="top" v-if="top3.length > 0">
			<view class="players" >
				<view class="item item2" v-if="top3[1]">
					<view class="avatar-content">
						<image class="crown" :src="'/static/icon/crown.png'" ></image>
						<image class="avatar2" :src="top3[1].player.avatar || '/static/icon/default-avatar.png'" ></image>
					</view>
					<text class="top-name">{{ top3[1].player.name }}</text>
					<text class="top-score">{{ top3[1].integral }}</text>
				</view>
				<view class="item item1" v-if="top3[0]">
					<view class="avatar-content">
						<image class="crown" :src="'/static/icon/crown.png'" ></image>
						<image class="avatar1" :src="top3[0].player.avatar || '/static/icon/default-avatar.png'" ></image>
					</view>
					<text class="top-name">{{ top3[0].player.name }}</text>
					<text class="top-score">{{ top3[0].integral }}</text>
				</view>
				<view class="item item3" v-if="top3[2]">
					<view class="avatar-content">
						<image class="crown" :src="'/static/icon/crown.png'" ></image>
						<image class="avatar3" :src="top3[2].player.avatar || '/static/icon/default-avatar.png'" ></image>
					</view>
					<text class="top-name">{{ top3[2].player.name }}</text>
					<text class="top-score">{{ top3[2].integral }}</text>
				</view>
			</view>
			<image class="ranking-bg" src="/static/ui1.0/5.png" mode="widthFix"></image>
		</view>
		<view
			v-if="listType === 'row'"
			v-for="(item, index) in renderList" 
			:key="index"
			class="list-item row b-b"
		>
			<text class="title clamp">{{ index +4 }}</text>
			<view class="image-wrapper lazyload lazypic" :class="{loaded: item.loaded}">
				<image 
					:src="item.player.avatar || '/static/icon/default-avatar.png'" 
					mode="aspectFill" 
					lazy-load="true"
					@load="imageOnLoad(item)" 
				></image>
			</view>
			<view class="right column">
				<text class="title clamp">{{ item.player.name }}</text>
				<text class="sales">积分 {{ item.integral }}</text>
				<view class="price-wrap row">
					<!-- <mix-price-view :price="item.price" :size="34"></mix-price-view> -->
					<!-- <text v-if="item.market_price > item.price" class="m-price">￥{{ item.market_price }}</text> -->
					<!-- <view class="tags row"> -->
						<!-- <view class="tag center" v-if="!item.freight_template">
							<text>了解Ta</text>
						</view> -->
						<!-- <view class="tag center orange">
							<text>赠送75积分</text>
						</view> -->
					<!-- </view> -->
				</view>
			</view>
		</view>
		<view
			v-if="listType === 'column'"
			v-for="item in renderList" 
			:key="item.id"
			class="list-item column"
			@click="navTo('/pagesA/product/detail?id=' + item.id)"
		>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MixProductList',
		data() {
			return {
				loadType: 'add',//标记加载还是刷新数据
				renderList: [],
				// top3Players: [],
				top3: [],
			};
		},
		props: {
			list: {
				type: Array,
				default(){
					return []
				}
			},
			top3Players: {
				type: Array,
				default(){
					return []
				}
			},
			listType: {
				type: String,
				default: 'row'
			}
		},
		watch: {
			list(list){
				// console.log("list=="+this.renderList.length)
				// console.log("list=="+JSON.stringify(list))
				// console.log("list=="+JSON.stringify(this.top3.length))
				
				// if(this.loadType === 'add'){
				// 	this.renderList = this.renderList.concat(list.slice(this.renderList.length));
				// }else{
					this.renderList = list;
				// }
				// console.log("list=="+JSON.stringify(this.renderList))
			},
			top3Players(list){
				// console.log("===top3Players=="+JSON.stringify(list))
				// this.top3Players = list;
				this.top3 = list;
				// console.log("===this.top3=="+JSON.stringify(this.top3))
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.top{
		height: auto;
		width: 100%;
		.players{
			height: 400rpx;
			width: 80%;
			display: flex;
			// flex-direction: row;
			margin-bottom: -130rpx;
			margin-left: 10%;
			margin-right: 10%;
			.item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.avatar-content{
					position: relative;
					overflow: hidden;
					width: 180rpx;
					height: 180rpx;
					// background-color: #07C160;
					
					.crown{
						position: absolute;
						z-index: 5;
						width: 80rpx;
						height: 80rpx;
						left: -10rpx;
						top: -10rpx;
					}
					.avatar{
						margin: auto;
						top: 30rpx;
						position: relative;
						flex-shrink: 0;
						width: 130rpx;
						height: 130rpx;
						border-radius: 100px;
						border: 4rpx solid #fff;
						background-color: #fff;
					}
				}
				.top-name{
					font-size: 30rpx;
					color: #ffffff;
					line-height: 40rpx;
				}
				.top-score{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #ffffff;
				}
				.name{
					font-size: 30rpx;
					color: #333;
					line-height: 40rpx;
				}
				.score{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #888;
				}
			}
			.item1{
				.avatar1{
					margin: auto;
					top: 30rpx;
					position: relative;
					flex-shrink: 0;
					width: 130rpx;
					height: 130rpx;
					border-radius: 100px;
					border: 4rpx solid #ffff66;
					background-color: #fff;
				}
			}
			.item2{
				margin-top: 60rpx;
				.avatar2{
					margin: auto;
					top: 30rpx;
					position: relative;
					flex-shrink: 0;
					width: 130rpx;
					height: 130rpx;
					border-radius: 100px;
					border: 4rpx solid #20ffff;
					background-color: #fff;
				}
			}
			.item3{
				padding-top: 120rpx;
				.avatar3{
					margin: auto;
					top: 30rpx;
					position: relative;
					flex-shrink: 0;
					width: 130rpx;
					height: 130rpx;
					border-radius: 100px;
					border: 4rpx solid #fc02ff;
					background-color: #fff;
				}
			}
		}
		.ranking-bg{
			width: 80%;
			// height: 120rpx;
			margin-bottom: -20rpx;
			// margin-top: -135rpx;
			margin-left: 10%;
		}
	}
	.mix-product-list{
		display:flex;
		justify-content: space-between;
		flex-wrap:wrap;
		// width: 710rpx;
		// margin-left: 20rpx;
		// background-color: #f7f7f7;
		
		&.is-row{
			margin-top: -4rpx;
			border-radius: 8rpx;
			box-shadow: 4rpx 4rpx 20rpx rgba(0,0,0,.06);
			overflow: hidden;
		}
	}
	/* 横向列表 */
	.list-item.row{
		width: 90%;
		padding: 24rpx 0 24rpx 24rpx;
		background-color: #fff;
		margin-left: 5%;
		// border-radius: 20rpx;
		
		&:after{
			border-color: #eaeaea;
			// border-color: #fc0107;
			left: 6rpx;
			right: 6rpx;
		}
		&:first-child{
			// border-radius: 50rpx;
			// background-color: #0081FF;
			// border-color: #66ffff;
			border-radius: 30rpx 30rpx 0 0 ;
		}
		&:last-child{
			// background-color: #0081FF;
			border-radius: 0 0 30rpx 30rpx;
		}
		&:last-child:after{
			border: 10;
			height: 10rpx;
			border-radius: 50rpx;
			border-color: #66ffff;
		}
		.image-wrapper{
			flex-shrink: 0;
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			flex: 1;
			overflow: hidden;
		}
		.title{
			margin-right: 24rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 40rpx;
		}
		.sales{
			height: 40rpx;
			// margin: 14rpx 0 28rpx;
			line-height: 40rpx;
			font-size: 26rpx;
			color: #888;
		}
		.price-wrap{
			display: flex;
			align-items: baseline;
			padding-right: 20rpx;
		}
		.m-price{
			font-size: 26rpx;
			text-decoration: line-through;
			color: #999;
			margin-left: 10rpx;
		}
		.tags{
			flex: 1;
			justify-content: flex-end;
			position: relative;
			bottom: 4rpx;
		}
		.tag{
			height: 32rpx;
			padding: 0 10rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
			color: #fff;
			border-radius: 4rpx;
			background-color: $base-color;
			
			&.orange{
				background-color: orange;
			}
		}
	}
	/* 竖向列表 */
	.list-item.column{
		width: 350rpx;
		padding-bottom: 16rpx;
		margin-bottom: 12rpx;
		background: #fff;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0 0 16rpx rgba(0,0,0,.06);
		position: relative;
		
		.image-wrapper{
			width: 100%;
			height: 350rpx;
			overflow: hidden;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			font-size: 28rpx;
			color: #333;
			line-height: 36rpx;
			padding: 0 16rpx;
			margin-top: 18rpx;
			height: 76rpx;
		}
		.price-wrap{
			padding: 0 16rpx;
			margin-top: 18rpx;
		}
		.m-price{
			font-size: 24rpx;
			text-decoration: line-through;
			color: #999;
			margin-left: 10rpx;
			
			&:before{
				content: "￥";
			}
		}
		.tag{
			height: 32rpx;
			padding: 0 10rpx;
			font-size: 20rpx;
			background-color: $base-color;
			color: #fff;
			border-radius: 4rpx;
			transform: translateY(-4rpx);
		}
	}
</style>
